<template>
  <div class="internal">
    <return-internal :title="$route.params.item"></return-internal>
    <div class="content">
      <van-cell value="" is-link @click="showPopup">
        <template slot="title">
          <span class="custom-text">头像</span>
          <img :src="img" alt="" />
        </template>
      </van-cell>

      <!-- <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '30%' }"
        closeable
      >
        <button>确定</button>
        <input type="file" name="" id="" @change="change" />
      </van-popup> -->
      <div class="upload" v-show="show">
        <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" description="更换头像" close-on-click-action />
        <input type="file" @change="change" class="upimg" />
      </div>
      <van-cell is-link class="phone">
        <template slot="title">
          <span class="custom-text">登录账号</span>
          <span class="number">{{ name }}</span>
        </template>
      </van-cell>
      <div class="del">
        <van-cell is-link v-for="(item, index) in lists" :key="index" @click="layoutAction(index)">
          <template slot="title">
            <span class="custom-text">{{ item }}</span>
          </template>
        </van-cell>
        <van-cell is-link @click="modifypasswordAction">
          <template slot="title">
            <span class="custom-text">修改密码</span>
          </template>
        </van-cell>
        <van-dialog v-model="show1" show-cancel-button closeOnClickOverlay class="change" @confirm="comfirmpsw">
          <input type="password" v-model="oldpass" placeholder="请输入旧密码" class="changepsw" />
          <input type="password" v-model="newpass" placeholder="请输入新密码" class="changepsw" />
        </van-dialog>
        <van-cell>
          <template slot="title">
            <span class="custom-text delete">注销账户后将无法恢复，请谨慎操作</span>
          </template>
        </van-cell>
      </div>
      <div class="quit" @click="quitAction">退出登录</div>
    </div>
  </div>
</template>

<script>
import { Cell, Popup, Dialog, ActionSheet, Toast } from "vant";
import axios from "axios";
import { getinfo } from "@/api/getinfo";
import { changePasswordApi } from "../../../api/follow";
export default {
  components: {
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    [ActionSheet.name]: ActionSheet,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      lists: ["用户协议与隐私条款", "账户注销"],
      show: false,
      show1: false,
      img: "https://cdn7.axureshop.com/demo/1763441/images/%E5%9C%A8%E7%BA%BF%E5%92%A8%E8%AF%A2-%E5%92%A8%E8%AF%A2%E4%B8%AD/u3331.png",
      name: "",
      actions: [{ name: "拍照" }, { name: "从相册中选择" }],
      oldpass: "",
      newpass: "",
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    modifypasswordAction() {
      this.show1 = true;
    },
    async comfirmpsw() {
      console.log(this.oldpass, this.newpass);
      if (this.oldpass === this.newpass) {
        Toast("新旧密码不能相同");
        this.oldpass = "";
        this.newpass = "";
        return;
      }
      try {
        const { data } = await changePasswordApi({
          oldpassword: this.oldpass,
          newpassword: this.newpass,
        });
        if (data.state) {
          Toast("修改成功");
          // 修改登录状态为false
          this.$store.commit("user/setIsLogin", false);
          //  清除token
          localStorage.removeItem("token");
          // localStorage.removeItem('')
          //跳转到登陆界面
          // this.$router.replace("/login");
        } else {
          Toast("旧密码有误");
          this.show1 = true;
        }
      } catch (error) {
        console.log(error);
      }
    },
    change(e) {
      let reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = async (e) => {
        let avatar = e.target.result;
        let res = await axios.request({
          method: "post",
          url: "/api/user/images",
          data: { img: avatar },
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });
        getinfo().then((res) => {
          console.log(res);
          this.img = res.data.datas.img;
          this.name = res.data.datas.username;
        });
      };
      this.show = false;
    },
    layoutAction(index) {
      if (index) {
        console.log(1);
        Dialog.confirm({
          title: "⚠",
          message: "确定要注销吗",
        })
          .then(async () => {
            // on confirm
            let res = await axios.request({
              method: "post",
              url: "/api/user/layout",
              headers: {
                Authorization: "Bearer " + localStorage.getItem("token"),
              },
            });
            console.log(res);
            this.$router.replace("/login");
            // 修改登录状态为false
            this.$store.commit("user/setIsLogin", false);
            //  清除token
            localStorage.removeItem("token");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    quitAction() {
      //跳转到登陆界面
      // this.$router.replace("/login");
      // 修改登录状态为false
      this.$store.commit("user/setIsLogin", false);
      //  清除token
      localStorage.removeItem("token");
    },
  },
  created() {
    getinfo().then((res) => {
      console.log(res);
      this.img = res.data.datas.img;
      this.name = res.data.datas.username;
    });
  },
};
</script>

<style scoped lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}

* {
  margin: 0;
  padding: 0;
}

.content {
  position: relative;
  top: 44px;
  background: rgba(242, 242, 242, 1);

  .upload {
    position: relative;
    height: 100%;

    input {
      position: absolute;
      // bottom: vw(-670);
      top: vw(620);
      height: vw(40);
      right: 0;
      z-index: 9999;
      width: 100%;
      background: transparent;
      opacity: 0;
      background: red;
    }

    .van-action-sheet__description {
      height: vw(40) !important;
      line-height: vw(40);
      font-size: vw(16);
    }

    .van-action-sheet__item {
      height: vw(50) !important;
    }

    .van-action-sheet__cancel {
      height: vw(40);
    }
  }
}

::v-deep .van-dialog__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: vw(20);
}

.change {
  .changepsw {
    width: vw(200);
    height: vw(30);
    margin-top: vw(20);
    border-radius: vw(5);
    border: vw(1) solid #808080;
  }

  .changepsw:focus {
    border-color: transparent;
    box-shadow: vw(0) vw(0) vw(3) vw(2) #2ec7c9;
  }

  .changepsw::placeholder {
    font-size: vw(14);
    color: #ccc;
  }
}

.van-cell {
  height: vw(50);
  position: relative;

  .van-cell__title {
    display: flex;
    align-items: center;

    .custom-text {
      margin-left: vw(10);
      font-size: vw(15);
      color: #333;
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 500;
      font-style: normal;
    }

    .delete {
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(12);
      color: #999999;
    }
  }

  img {
    position: absolute;
    right: vw(20);
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
    width: vw(30);
    height: vw(31);
    border-radius: 50%;
  }

  .van-icon {
    height: 100%;
    position: absolute;
    right: vw(10);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.phone {
  margin-top: vw(10);
}

.van-cell__value {
  span {
    position: relative;
    right: vw(40);
    top: vw(14);
  }
}

.del {
  margin-top: vw(10);
  height: vw(185);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.quit {
  width: vw(303);
  height: vw(46);
  background: rgba(46, 199, 201, 1);
  margin: vw(100) auto;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: vw(17);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: vw(3);
}

.number {
  position: absolute;
  right: vw(40);
  font-family: "MicrosoftYaHei", "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: vw(13);
  color: #999999;
}
</style>
